<template>
<div class="account">
	<el-icon size="32" @click="handleBack()">
		<ArrowLeft style="cursor: pointer" />
	</el-icon>

	<div class="user flex-b-s" style="margin: 30px 120px 0">
		<div class="left flex-s-c">
			<img style="width: 40px;height: 40px;border-radius: 50%;margin-right: 10px" src="/images/9.jpg" alt="">
			<div class="name">
				<p>Kikyō</p>
				<p>0x1412......123412</p>
			</div>
		</div>
		<div style="text-align: right">
			<p>0.002ETH</p>
			<p>Wallet Balance</p>
		</div>
	</div>

	<div class="list flex-b-c">
		<div class="item" :class="active === 1 ? 'active' : ''" @click="active = 1">
			<p>Portfolio Value</p>
			<p>1.295</p>
		</div>
		<div class="item" :class="active === 2 ? 'active' : ''" @click="active = 2">
			<p>Your Key Value</p>
			<p>2.425</p>
		</div>
		<div class="item" :class="active === 3 ? 'active' : ''" @click="active = 3">
			<p>Dividend Earned</p>
			<p>6.445</p>
		</div>
	</div>

	<div class="btn-pop flex-c-c">
		<div>
			<el-icon style="padding: 14px;background: #efefef;border-radius: 50%;display: block;margin: 10px auto;" size="40px"><Download /></el-icon>
			<p>Deposit On Chain</p>
		</div>
		<div style="margin-left: 80px; cursor: pointer" @click="dialogVisible=true">
			<el-icon style="padding: 14px;background: #efefef;border-radius: 50%;display: block;margin: 10px auto;" size="40px"><WalletFilled /></el-icon>
			<p>Withdraw</p>
		</div>
	</div>

	<div class="btn-list">
		<el-button>Setting</el-button>
		<el-button>Export Wallet</el-button>
		<el-button>Log Out</el-button>
	</div>

	<el-dialog v-model="dialogVisible" title="Withdraw ETH" width="300px" @close="dialogVisible = false">
		<div class="dialog">
			<el-input style="margin-bottom: 20px" placeholder="Enter Address ..."></el-input>
			<el-input placeholder="Enter Amount ..."></el-input>
		</div>
		<template #footer>
				<span class="dialog-footer">
					<el-button @click="dialogVisible = false">Cancel</el-button>
					<el-button type="primary" @click="dialogVisible = false"> Transfer </el-button>
				</span>
		</template>
	</el-dialog>
</div>
</template>
<script setup>
import {useRouter} from "vue-router";
import {ArrowLeft, Download, WalletFilled} from "@element-plus/icons";
import {ref} from "vue";

const router = useRouter();
const active = ref(1);
const dialogVisible = ref(false);
const handleBack = () => {
	router.back();
};
</script>
<style scoped lang="scss">
.account{
	.list {
		width: 100%;
		margin-top: 40px;

		.item {
			width: calc(33% - 10px);
			height: 160px;
			border-radius: 14px;
			border: 1px solid #d3d3d3;
			padding: 30px;
			box-sizing: border-box;

			p {
				line-height: 28px;
				font-size: 16px;
			}

			p:last-child {
				font-weight: bold;
				font-size: 24px;
			}
		}

		.active {
			background: #ffd40e;
			border-color: #ffd40e;
			color: #ffffff;
		}
	}

	.btn-pop{
		margin: 30px 0;
	}

	.btn-list{
		:deep(.el-button){
			width: 150px;
			height: 40px;
			display: block;
			margin: 0 auto 30px;
			background: #ffd40e;
			border: none;
			color: #ffffff;
		}
	}
}
</style>